<script lang="ts" setup>
defineOptions({ name: 'ShowingData' });

import { ref } from "vue";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import { AgGridVue } from "ag-grid-vue3";

const rowData = ref();
const gridApi = ref()
const defaultColDef = ref({
    editable: true,
    filter: true,
});

const columnDefs = ref([
    { field: "athlete", minWidth: 170 },
    { field: "age" },
    { field: "country" },
    { field: "year" },
    { field: "date" },
    { field: "sport" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
]);

const onGridReady = (params) => {
    gridApi.value = params.api;

    const updateData = (data) => (rowData.value = data);

    fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
};
</script>

<template>
    <div style="width: 100%;height: 500px">
        <ag-grid-vue style="width: 100%; height: 100%;" class="ag-theme-quartz" :columnDefs="columnDefs"
            @grid-ready="onGridReady" :rowData="rowData" :defaultColDef="defaultColDef"></ag-grid-vue>
    </div>
</template>

<style scoped>
.ag-theme-quartz,
.ag-theme-quartz-dark {
    /* Changes the color of the grid text */
    --ag-foreground-color: rgb(14, 68, 145);
    /* Changes the color of the grid background */
    --ag-background-color: rgba(241, 247, 255);
    /* Changes the header color of the top row */
    --ag-header-background-color: rgba(228, 237, 250);
    /* Changes the hover color of the row*/
    --ag-row-hover-color: rgba(0, 38, 255, 0.1);
}
</style>